<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<jsp:include page="../../common.jsp"></jsp:include>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>模板信息</title>
    <script type="text/javascript" src="../template/myLayer.js"></script>
    <%
        String path = request.getContextPath();
    %>

    <%--ueditorUE--%>
    <script type="text/javascript" charset="utf-8" src="<%=path %>/statics/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=path %>/statics/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="<%=path %>/statics/ueditor/lang/zh-cn/zh-cn.js"></script>

    <style>
        /*初始化编辑器边框*/
        .edui-default .edui-editor {
            border: 0px solid #d4d4d4;
        }
        /*初始化编辑器高度,默认320*/
        #edui1_iframeholder{
            height: 80vh !important
        }
    </style>
    <script type="text/javascript">
        //ueditorUE 初始化文本编辑器
        //var ue = UE.getEditor('content');
        var ue = UE.getEditor('html',{
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
            toolbars:[],
            //关闭字数统计
            wordCount:false,
            //默认的编辑区域高度
            initialFrameWidth:null,
            //initialFrameHeight:null,  //初始化编辑器高度,默认320
            //更多其他参数，请参考ueditor.config.js中的配置项
            //autoHeightEnabled:true
        });
        //ueditorUE 去掉本地保存成功的提示框！
        ue.ready(function () {
            $(".edui-editor-messageholder.edui-default").css({ "visibility": "hidden" });
            ue.setDisabled();
        });

    </script>
    <script type="text/javascript">
		$(function () {
		
		    //1.初始化Table
		    var oTable = new TableInit();
		    oTable.Init();
		
		    //2.初始化Button的点击事件
		    var oButtonInit = new ButtonInit();
		    oButtonInit.Init();
			//初始化提示框的位置：top-center，bottom-left，bottom-right
		    toastr.options.positionClass = 'toast-top-center';
		});
	var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_table').bootstrapTable({
            url: "${pageContext.request.contextPath}/template/selectTemplateList.do",
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                    //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 30],        		//可供选择的每页的行数（*）
            strictSearch: true,
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 550,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "roleId",                 //每一行的唯一标识，一般为主键列
            detailView: false,                  //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field:'tid',
                visible: false,
				title:"编号",
				align:'center'
			},{
                field:'pre',
                visible: false,
				title:"预览图片",
				align:'center'
			},{
                field:'preHtml',
				title:"模板名称",
				align:'left', 
                halign: 'center',
                formatter: function(value, row, index){
                	var xs = value; 
                	if(value.length > 15){
                		xs = "<span title='"+value+"'>"+value.substring(0,15)+"..."+"</span>";
                	}
                    return xs;  
                }
			},{
                field:'title',
				title:"模板说明",
				align:'left', 
                halign: 'center',
                formatter: function(value, row, index){
                	var xs = value; 
                	if(value.length > 30){
                		xs = "<span title='"+value+"'>"+value.substring(0,30)+"..."+"</span>";
                	}
                    return xs;  
                }
			},{
                field:'tremark1',
				title:"创建人",
				align:'center',
				width:"100px",
			},{
                field:'tremark4',
				title:"创建日期",
				align:'center',
				width:"100px",
            },{
                field:'title',
                title:"预览",
                align:'center',
                width:"80px",
                formatter : function(cell, row, index) {
                    cell ='<button type="button" id="btn_preview" class="btn btn-primary" onclick="preview('+row.tid+')">预览</button>';
                    return cell;
                },
			}],
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
      		page: params.offset/params.limit+1,   //页面大小
            rows: params.limit,  //页码
            preHtml:$.trim($('#preHtmlTJ').val()),
            title:$.trim($('#titleTJ').val()),
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};

function preview(tid) {
    $.ajax({
        url: '/template/selectTemplateById.do' ,
        type: 'post',
        async:false,
        dataType:'json',
        data:"id="+tid,
        success: function (data) {
            ue.setContent(data.html);
            $('#exampleModal').modal(open);
        },
    });

}



//判断本页是否数据是否为空，如果为空跳转至第一页
function refresh(){
	setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
		var row=$('#tb_table').bootstrapTable('getData');
		if(row.length == 0){
			$("#tb_table").bootstrapTable("refreshOptions",{pageNumber:1});
		}
	},1000);
}
//删除
function doDelete() {
	var row = $.map($("#tb_table").bootstrapTable('getSelections'),function(row){
		return row ;
	});
	if (row.length == 0) {
		toastr.warning('请至少选择一条数据!');
	}else{
		var ids = "";
		var names = "";
		for(var i = 0;i < row.length;i++){
			if(i == 0 || i == "0"){
				ids += row[i].tid;
			}else{
				ids += "," + row[i].tid;
			}
		}
		
		//询问框
		Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
	       if (!e) {
	         return;
	       } 
	    	var url = "${pageContext.request.contextPath }/template/deleteTemplate.do";
		    $.post(url, "ids="+ids, function(data) {
				if (data >= 1) {
					toastr.success('删除成功');
					setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
						$('#tb_table').bootstrapTable('refresh');
						refresh();
					},1000);
				} else {
					toastr.error('删除失败');
					setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
						$('#tb_table').bootstrapTable('refresh');
						refresh();
					},1000);
				}
			}); 
	    }); 
	}
}
//打开添加框
function doAdd() {
    window.location.href="${pageContext.request.contextPath}/template/pageToTemplateXq.do";
}

//打开修改框
function doView() {
	//取表格的选中行数据
    var row = $("#tb_table").bootstrapTable('getSelections');
	if (row.length == 1) {
        window.location.href="${pageContext.request.contextPath}/template/pageToTemplateXq.do?id="+row[0].tid;

    }else{
		toastr.warning('请选择一条数据!');
	}
}
//刷新表格
function seach() {
	$("#tb_table").bootstrapTable("refreshOptions",{pageNumber:1});
}
</script>
<style type="text/css">
    	.panel{
    		margin-bottom: 0px;
    	}
    	.panel-body{
    		padding: 5px;
    	}
    	.form-group{
    		margin: 0px;
    	}
    </style>

</head>
<body>
	<div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <!-- <div class="panel-heading">查询条件</div> -->
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-1" for="preHtmlTJ">模板名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="preHtmlTJ">
                        </div>
						<label class="control-label col-sm-1" for="titleTJ">模板说明</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="titleTJ">
                        </div>
                        <div class="col-sm-4">
                            <button type="button" style="margin-left: 20%;" id="btn_query" class="btn btn-primary" onclick="seach()">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default" onclick="doAdd()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default" onclick="doView()">
           		 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default" onclick="doDelete()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <table id="tb_table"></table>
    </div>

    <div class="modal fade bs-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close closefm" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">
                    <span style="font-size:13px">预览</span>&nbsp;&nbsp;&nbsp;&nbsp;
	                <button type="button" class="btn btn-default" onclick="dy()">
	                    <span class="glyphicon glyphicon-print" aria-hidden="true"></span>
	                </button>
                </h4>
                <script type="text/javascript">
                    function dy() {
                    	var css="<style>"
                            +"table {border-collapse: collapse;" +
                                "border:1px #ddd solid;" +
                           "}"
                           +"table tr td {" +
                                "border:1px #ddd solid;" +
                           "}"
                            +"</style>";
                        var printHtml = css + ue.getContent();
                    	printpage(printHtml)
                    }
                   
                    function printpage(printHtml){    
                    	var wind = window.open("",'newwindow', 'top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
                    	wind.document.body.innerHTML = printHtml;
                    	wind.print();
                    	return false; 
                    }
                </script>

                </div>
                <div class="modal-body" >
                    <textarea id="html" name="html"></textarea>
                </div>
           </div>
        </div>
    </div>
</body>
</html>